{% extends 'layout.html' %}
{% block content %}
    <div class="row">
        {# 柱状图 #}
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">商品销售信息可视化</div>
                <div class="panel-body">
                    <div id="main" style="width: 400px; height: 400px"></div>
                    <script type="text/javascript">
                        $(function () {
                            initChart('main', '商品销售详情', '销售数据统计', 'bar', '/system/work01/goods_sales_show', 'y_list');
                        });

                        // 初始化图表的通用函数
                        function initChart(divId, titleText, subTitleText, chartType, url, dataKey) {
                            try {
                                var myChart = echarts.init(document.getElementById(divId));
                                var option = {
                                    title: {
                                        text: titleText,
                                        subtext: subTitleText,
                                        left: 'center',
                                        textStyle: {
                                            color: '#333',
                                            fontSize: 18
                                        }
                                    },
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'shadow'
                                        },
                                        formatter: function (params) {
                                            var tooltip = params[0].name + '<br/>';
                                            params.forEach(function (param) {
                                                tooltip += param.seriesName + ': ' + param.value + '<br/>';
                                            });
                                            return tooltip;
                                        }
                                    },
                                    legend: {
                                        data: ['销量', '销售额'],
                                        top: 'bottom',
                                        left: 'center'
                                    },
                                    xAxis: {
                                        type: 'category',
                                        data: [],
                                        axisLabel: {
                                            fontSize: 12,
                                            interval: 0,
                                            rotate: 30,
                                            show: false
                                        },
                                        axisLine: {
                                            lineStyle: {
                                                color: '#999'
                                            }
                                        },
                                        axisTick: {
                                            show: false
                                        }
                                    },
                                    yAxis: {
                                        type: 'value',
                                        axisLabel: {
                                            fontSize: 12
                                        },
                                        axisLine: {
                                            lineStyle: {
                                                color: '#999'
                                            }
                                        },
                                        axisTick: {
                                            show: false
                                        },
                                        splitLine: {
                                            lineStyle: {
                                                color: ['#eee']
                                            }
                                        }
                                    },
                                    series: [
                                        {
                                            name: '销量',
                                            type: 'bar',
                                            data: [],
                                            itemStyle: {
                                                color: '#5470c6'
                                            }
                                        },
                                        {
                                            name: '销售额',
                                            type: 'bar',
                                            data: [],
                                            itemStyle: {
                                                color: '#91cc75'
                                            }
                                        }
                                    ]
                                };

                                if (chartType === 'line') {
                                    option.series = [
                                        {
                                            name: '价格',
                                            type: 'line',
                                            data: [],
                                            itemStyle: {
                                                color: '#5470c6'
                                            }
                                        }
                                    ];
                                }

                                $.ajax({
                                    url: url,
                                    type: "get",
                                    dataType: "JSON",
                                    success: function (res) {
                                        try {
                                            if (res.status && res.data && res.data.x_list && res.data[dataKey]) {
                                                option.xAxis.data = res.data.x_list;
                                                option.series = res.data[dataKey];
                                                myChart.setOption(option);
                                            } else {
                                                console.error('无效的响应数据');
                                            }
                                        } catch (e) {
                                            console.error('设置图表选项时出错:', e);
                                        }
                                    },
                                    error: function (xhr, status, error) {
                                        console.error('AJAX 请求失败:', error);
                                        alert('数据加载失败，请稍后重试');
                                    }
                                });
                            } catch (e) {
                                console.error('初始化图表时出错:', e);
                            }
                        }
                    </script>
                </div>
            </div>
        </div>

        {# 图2，对应商品价格 #}
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">商品销售信息可视化</div>
                <div class="panel-body">
                    <div id="main2" style="width: 400px; height: 400px"></div>
                    <script type="text/javascript">
                        $(function () {
                            initChart('main2', '商品评价表', '销售价格数据展示', 'line', '/system/work01/goods_sales_show', 'y2_list');
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>

    {#    <div class="row">#}
    {#    柱状图#}
    {#        <div class="col-sm-6">#}
    {#            <div class="panel panel-default">#}
    {#                <div class="panel-heading">柱状图</div>#}
    {#                <div class="panel-body">#}
    {#                    <div id="main" style="width: 400px; height: 400px"></div>#}
    {#                    <script type="text/javascript">#}
    {#                        $(function () {#}
    {#                            initBar();#}
    {#                        })#}
    {##}
    {#                        // 初始化柱状图#}
    {#                        function initBar() {#}
    {#                            try {#}
    {#                                // 基于准备好的DOM，初始化ECharts图表#}
    {#                                var myChart = echarts.init(document.getElementById("main"));#}
    {#                                // 指定图表的配置项和数据#}
    {#                                var option = {#}
    {#                                    title: {  // 配置标题组件，包含主标题和副标题#}
    {#                                        text: '商品销售详情',#}
    {#                                        subtext: '销售数据统计',#}
    {#                                        left: 'center',#}
    {#                                        textStyle: {#}
    {#                                            color: '#333',#}
    {#                                            fontSize: 18#}
    {##}
    {#                                        },#}
    {#                                        tooltip: {#}
    {#                                            trigger: 'axis',#}
    {#                                            axisPointer: {#}
    {#                                                type: 'shadow'#}
    {#                                            },#}
    {#                                            formatter: function (params) {#}
    {#                                                var tooltip = params[0].name + '<br/>';#}
    {#                                                params.forEach(function (param) {#}
    {#                                                    tooltip += param.seriesName + ': ' + param.value + '<br/>';#}
    {#                                                });#}
    {#                                                return tooltip;#}
    {#                                            }#}
    {#                                        }#}
    {#                                    },#}
    {#                                    legend: {  // 配置图例组件，一个echarts图表中可以存在多个图例组件#}
    {#                                        data: ['销量', '销售额'],#}
    {#                                        top: 'bottom',#}
    {#                                        left: 'center'#}
    {#                                    },#}
    {#                                    xAxis: {  // 配置x轴坐标系#}
    {#                                        type: 'category',#}
    {#                                        data: [], // 后台获取数据#}
    {#                                        axisLabel: { // 配置坐标轴刻度标签的相关设置#}
    {#                                            fontSize: 12, // 设置字体大小#}
    {#                                            interval: 0,#}
    {#                                            rotate: 30#}
    {#                                        },#}
    {#                                        axisLine: {#}
    {#                                            lineStyle: {#}
    {#                                                color: '#999'#}
    {#                                            }#}
    {#                                        },#}
    {#                                        axisTick: {#}
    {#                                            show: false#}
    {#                                        }#}
    {##}
    {#                                    },#}
    {#                                    yAxis: {#}
    {#                                        type: 'value',#}
    {#                                        axisLabel: {#}
    {#                                            fontSize: 12#}
    {#                                        },#}
    {#                                        axisLine: {#}
    {#                                            lineStyle: {#}
    {#                                                color: '#999'#}
    {#                                            }#}
    {#                                        },#}
    {#                                        axisTick: {#}
    {#                                            show: false#}
    {#                                        },#}
    {#                                        splitLine: {#}
    {#                                            lineStyle: {#}
    {#                                                color: ['#eee']#}
    {#                                            }#}
    {#                                        }#}
    {#                                    },  // 配置y轴坐标系#}
    {#                                    series: [#}
    {#                                        {#}
    {#                                            name: '销量',#}
    {#                                            type: 'bar',#}
    {#                                            data: [],#}
    {#                                            itemStyle: {#}
    {#                                                color: '#5470c6'#}
    {#                                            }#}
    {#                                        },#}
    {#                                        {#}
    {#                                            name: '销售额',#}
    {#                                            type: 'bar',#}
    {#                                            data: [],#}
    {#                                            itemStyle: {#}
    {#                                                color: '#91cc75'#}
    {#                                            }#}
    {#                                        }#}
    {#                                    ] // 后台获取数据#}
    {#                                };#}
    {##}
    {#                                // 通过发送ajax请求获据#}
    {#                                $.ajax({#}
    {#                                    url: "/system/work01/goods_sales_show", // 建议使用配置文件管理URL#}
    {#                                    type: "get",#}
    {#                                    dataType: "JSON",#}
    {#                                    success: function (res) {#}
    {#                                        try {#}
    {#                                            if (res.status && res.data && res.data.x_list && res.data.y_list) {#}
    {#                                                option.xAxis.data = res.data.x_list;#}
    {#                                                option.series = res.data.y_list;#}
    {#                                                myChart.setOption(option);#}
    {#                                            } else {#}
    {#                                                console.error('无效的响应数据');#}
    {#                                            }#}
    {#                                        } catch (e) {#}
    {#                                            console.error('设置图表选项时出错:', e);#}
    {#                                        }#}
    {#                                    },#}
    {#                                    error: function (xhr, status, error) {#}
    {#                                        console.error('AJAX 请求失败:', error);#}
    {#                                        alert('数据加载失败，请稍后重试');#}
    {#                                    }#}
    {#                                });#}
    {#                            } catch#}
    {#                                (e) {#}
    {#                                console.error('初始化图表时出错:', e);#}
    {#                            }#}
    {#                        }#}
    {#                    </script>#}
    {#                </div>#}
    {#            </div>#}
    {#        </div>#}
    {##}
    {##}
    {##}
    {#    图2，对应商品价格#}
    {#        <div class="col-sm-6">#}
    {#            <div class="panel panel-default">#}
    {#                <div class="panel-heading">柱状图</div>#}
    {#                <div class="panel-body">#}
    {#                    <div id="main2" style="width: 400px; height: 400px"></div>#}
    {#                    <script type="text/javascript">#}
    {#                        $(function () {#}
    {#                            initLine();#}
    {#                        })#}
    {##}
    {#                        // 初始化柱状图#}
    {#                        function initLine() {#}
    {#                            try {#}
    {#                                // 基于准备好的DOM，初始化ECharts图表#}
    {#                                var myChart = echarts.init(document.getElementById("main2"));#}
    {#                                // 指定图表的配置项和数据#}
    {#                                var option = {#}
    {#                                    title: {  // 配置标题组件，包含主标题和副标题#}
    {#                                        text: '商品价格详情',#}
    {#                                        subtext: '销售价格数据展示',#}
    {#                                        left: 'center',#}
    {#                                        textStyle: {#}
    {#                                            color: '#333',#}
    {#                                            fontSize: 18#}
    {##}
    {#                                        },#}
    {#                                        tooltip: {#}
    {#                                            trigger: 'axis',#}
    {#                                            axisPointer: {#}
    {#                                                type: 'shadow'#}
    {#                                            },#}
    {#                                            formatter: function (params) {#}
    {#                                                var tooltip = params[0].name + '<br/>';#}
    {#                                                params.forEach(function (param) {#}
    {#                                                    tooltip += param.seriesName + ': ' + param.value + '<br/>';#}
    {#                                                });#}
    {#                                                return tooltip;#}
    {#                                            }#}
    {#                                        }#}
    {#                                    },#}
    {#                                    legend: {  // 配置图例组件，一个echarts图表中可以存在多个图例组件#}
    {#data: ['销量', '销售额'],#}
    {#top: 'bottom',#}
    {#left: 'center'#}
    {#                                    },#}
    {#                                    xAxis: {  // 配置x轴坐标系#}
    {#                                        type: 'category',#}
    {#                                        data: [], // 后台获取数据#}
    {#                                        axisLabel: { // 配置坐标轴刻度标签的相关设置#}
    {#                                            fontSize: 12, // 设置字体大小#}
    {#                                            interval: 0,#}
    {#                                            rotate: 30#}
    {#                                        },#}
    {#                                        axisLine: {#}
    {#                                            lineStyle: {#}
    {#                                                color: '#999'#}
    {#                                            }#}
    {#                                        },#}
    {#                                        axisTick: {#}
    {#                                            show: false#}
    {#                                        }#}
    {##}
    {#                                    },#}
    {#                                    yAxis: {#}
    {#                                        type: 'value',#}
    {#                                        axisLabel: {#}
    {#                                            fontSize: 12#}
    {#                                        },#}
    {#                                        axisLine: {#}
    {#                                            lineStyle: {#}
    {#                                                color: '#999'#}
    {#                                            }#}
    {#                                        },#}
    {#                                        axisTick: {#}
    {#                                            show: false#}
    {#                                        },#}
    {#                                        splitLine: {#}
    {#                                            lineStyle: {#}
    {#                                                color: ['#eee']#}
    {#                                            }#}
    {#                                        }#}
    {#                                    },  // 配置y轴坐标系#}
    {#                                    series: [#}
    {#                                        {#}
    {#                                            name: '价格',#}
    {#                                            type: 'line',#}
    {#                                            data: [],#}
    {#                                            itemStyle: {#}
    {#                                                color: '#5470c6'#}
    {#                                            }#}
    {#                                        },#}
    {#                                        {#}
    {#                                            name: '价格',#}
    {#                                            type: 'line',#}
    {#                                            data: [],#}
    {#                                            itemStyle: {#}
    {#                                                color: '#91cc75'#}
    {#                                            }#}
    {#                                        }#}
    {#                                    ] // 后台获取数据#}
    {#                                };#}
    {##}
    {#                                // 通过发送ajax请求获据#}
    {#                                $.ajax({#}
    {#                                    url: "/system/work01/goods_sales_show", // 建议使用配置文件管理URL#}
    {#                                    type: "get",#}
    {#                                    dataType: "JSON",#}
    {#                                    success: function (res) {#}
    {#                                        try {#}
    {#                                            if (res.status && res.data && res.data.x_list && res.data.y2_list) {#}
    {#                                                option.xAxis.data = res.data.x_list;#}
    {#                                                option.series = res.data.y2_list;#}
    {#                                                myChart.setOption(option);#}
    {#                                            } else {#}
    {#                                                console.error('无效的响应数据');#}
    {#                                            }#}
    {#                                        } catch (e) {#}
    {#                                            console.error('设置图表选项时出错:', e);#}
    {#                                        }#}
    {#                                    },#}
    {#                                    error: function (xhr, status, error) {#}
    {#                                        console.error('AJAX 请求失败:', error);#}
    {#                                        alert('数据加载失败，请稍后重试');#}
    {#                                    }#}
    {#                                });#}
    {#                            } catch#}
    {#                                (e) {#}
    {#                                console.error('初始化图表时出错:', e);#}
    {#                            }#}
    {#                        }#}
    {#                    </script>#}
    {#                </div>#}
    {#            </div>#}
    {#        </div>#}
    {##}
    {##}
    {##}
    {#    </div>#}
{% endblock %}
